
import { setVisibility, data } from './dsdata.js'

const IMAGE_HOST = 'http://localhost/main/mul_fit/'

function datatime2str(data) {

    return data.year + "-" + data.month + "-" +
        data.day + " " + data.hour + ":" + data.minute +
        ":" + data.second
}

function dataformula(data) {

    if (data == null || data.length < 1) {
        return null;
    }

    let temp = new Array();
    for(let i = data.length-1, j = 0; i > 0; i--, j++) {
        temp[j] = {
            temperature: data[i].temperature,
            humidity: data[i].humidity,
            percentage: data[i].percentage,
            datetime: datatime2str(data[i].datetime)
        }
    }
    return temp;
}

const Options = ['温度曲线', '湿度曲线', '拟合', '预测'];
const Colors = ["#E6A23C", "#409EFF", "#67C23A", "#F56C6C"]
var Main = {
    data() {
        return {
            // checkbox
            checkAll: false,
            // checked: Options.slice(2),
            checked: [],
            options: Options,
            colors: Colors,
            color: "#E6A23C",
            isIndeterminate: true,

            // header
            activeIndex: '1',
            activeIndex2: '1',

            // style
            styleObject: {
                display: 'flex'
            },

            // drawer
            modal: false,
            drawer: false,
            fitChecked: false,
            direction: 'rtl',
            size: '45%',

            // mul_fit image
            src: IMAGE_HOST,

            // form
            tableData: dataformula(data),
        };
    },
    methods: {
        // checkbox
        handleCheckAllChange(val) {
            this.checked = val ? Options : [];
            this.isIndeterminate = false;
        },
        handleCheckedChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.options.length;
            this.isIndeterminate = checkedCount > 0 &&
                checkedCount < this.options.length;

            if (value.includes(Options[0])) {
                setVisibility("TEMPERATURE", "VISABLE");
            } else {
                setVisibility("TEMPERATURE", "GONE");
            }
            if (value.includes(Options[1])) {
                setVisibility("HUMIDITY", "VISABLE");
            } else {
                setVisibility("HUMIDITY", "GONE");
            }
            if (value.includes(Options[2])) {
                setVisibility("FIT", "VISABLE");
                if (this.fitChecked == false) {
                    this.drawer = true;
                    this.fitChecked = true;
                }
            } else {
                setVisibility("FIT", "GONE");
                this.drawer = false;
                this.fitChecked = false;
            }
            if (value.includes(Options[3])) {
                setVisibility("PREDICT", "VISABLE");
            } else {
                setVisibility("PREDICT", "GONE");
            }
        },

        // header
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
            if (key == 2) {
                window.open("http://localhost/main/notifications");
            }
        },

        // drawer
        handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
        },

        // form
        tableRowClassName({row, rowIndex}) {
            if (row.percentage >= 5) {
              return 'danger-row';
            } else if (row.percentage >= 3) {
              return 'warning-row';
            }
            return 'safe-row';
        }
    }
};
var Ctor = Vue.extend(Main);
var mCtor = new Ctor().$mount('#app');

function gotData() {
    mCtor.tableData = dataformula(data);
    mCtor.src = IMAGE_HOST;
}

export{
    gotData
}